{% extends "base.html" %}
{% block title %}成绩统计{% endblock %}

{% block content %}
<h2 class="mb-4">成绩统计分析</h2>

<div class="row mb-4">
    <div class="col-md-6">
        <div class="card">
            <div class="card-header">
                <h5>班级平均分</h5>
            </div>
            <div class="card-body">
                <canvas id="classChart"></canvas>
            </div>
        </div>
    </div>

    <div class="col-md-6">
        <div class="card">
            <div class="card-header">
                <h5>课程平均分</h5>
            </div>
            <div class="card-body">
                <canvas id="courseChart"></canvas>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-md-12">
        <div class="card">
            <div class="card-header">
                <h5>分数段分布</h5>
            </div>
            <div class="card-body">
                <canvas id="scoreRangeChart"></canvas>
            </div>
        </div>
    </div>
</div>

{% block scripts %}
<script>
    // 班级平均分图表
    const classCtx = document.getElementById('classChart').getContext('2d');
    const classChart = new Chart(classCtx, {
        type: 'bar',
        data: {
            labels: [{% for stat in class_stats %}'{{ stat.class_name }}'{% if not loop.last %}, {% endif %}{% endfor %}],
            datasets: [{
                label: '平均分',
                data: [{% for stat in class_stats %}{{ stat.avg_score }}{% if not loop.last %}, {% endif %}{% endfor %}],
                backgroundColor: 'rgba(54, 162, 235, 0.5)',
                borderColor: 'rgba(54, 162, 235, 1)',
                borderWidth: 1
            }]
        },
        options: {
            scales: {
                y: {
                    beginAtZero: true,
                    max: 100
                }
            }
        }
    });

    // 课程平均分图表
    const courseCtx = document.getElementById('courseChart').getContext('2d');
    const courseChart = new Chart(courseCtx, {
        type: 'bar',
        data: {
            labels: [{% for stat in course_stats %}'{{ stat.name }}'{% if not loop.last %}, {% endif %}{% endfor %}],
            datasets: [{
                label: '平均分',
                data: [{% for stat in course_stats %}{{ stat.avg_score }}{% if not loop.last %}, {% endif %}{% endfor %}],
                backgroundColor: 'rgba(255, 99, 132, 0.5)',
                borderColor: 'rgba(255, 99, 132, 1)',
                borderWidth: 1
            }]
        },
        options: {
            scales: {
                y: {
                    beginAtZero: true,
                    max: 100
                }
            }
        }
    });

    // 分数段分布图表
    const scoreRangeCtx = document.getElementById('scoreRangeChart').getContext('2d');
    const scoreRangeChart = new Chart(scoreRangeCtx, {
        type: 'pie',
        data: {
            labels: [{% for range in score_ranges %}'{{ range.score_range }}'{% if not loop.last %}, {% endif %}{% endfor %}],
            datasets: [{
                data: [{% for range in score_ranges %}{{ range.count }}{% if not loop.last %}, {% endif %}{% endfor %}],
                backgroundColor: [
                    'rgba(255, 99, 132, 0.7)',
                    'rgba(54, 162, 235, 0.7)',
                    'rgba(255, 206, 86, 0.7)',
                    'rgba(75, 192, 192, 0.7)',
                    'rgba(153, 102, 255, 0.7)',
                    'rgba(255, 159, 64, 0.7)'
                ],
                borderWidth: 1
            }]
        }
    });
</script>
{% endblock %}
{% endblock %}